<template>
	<el-tabs v-model="activeName" :type="type" @tab-click="handleClick">
		<el-tab-pane v-for="item in tabList" :key="item.name" :label="item.label" :name="item.name"></el-tab-pane>
	</el-tabs>
</template>

<script setup lang="ts" name="TabPane">
import { ref, onMounted, toRefs } from 'vue';
import type { TabsPaneContext } from 'element-plus';
const activeName = ref('');
type TabListProps = {
	name: string;
	label: string;
};
interface ModelEmits {
	(e: 'tab-click', value: string): void;
}
const props = defineProps<{
	tabList: TabListProps[];
	type?: '' | 'card' | 'border-card';
}>();
const { tabList } = toRefs(props);

const emit = defineEmits<ModelEmits>();
const handleClick = (tab: TabsPaneContext) => {
	emit('tab-click', tab.paneName as string);
};

onMounted(() => {
	activeName.value = tabList.value?.[0]?.name ?? '';
});
</script>
